<template>
  <div>
    <div style="width: 280px; margin: 0 auto 10px; text-align: center; font-size: 18px" v-if="param == 'deviceId'">
      {{$t('商家')}}：{{ info.name }}({{ info.code }})
    </div>
    <div id="qrcode" ref="qrcode" style="width:280px;height280px;margin-left:34%;">
      <img :src="imgSrc" style="width:280px;height280px;margin:auto" />
    </div>
    <div style="text-align: center; margin-top: 20px">
      <div>
        <a
          id="downloadImg"
          @click="downloadImg"
          style="padding: 7px; background-color: #008dd9; border-radius: 5px; color: #ffff"
          >{{$t('下载')}}</a
        >
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { getAction } from '@/api/manage'
export default {
  name: 'qrcodemodel',
  props: {
    info: {
      type: [Object],
      default: {},
    },
    url: {
      type: [String],
      default: '',
    },
    param: {
      type: [String],
      default: '',
    },
    paramValue: {
      type: [String],
      default: '',
    },
  },
  data() {
    return {
      imgSrc: '',
    }
  },
  mounted() {
    this.qrCode(this.info)
  },
  methods: {
    downloadImg() {
      let that = this
      var img = document.getElementById('qrcode').getElementsByTagName('img')[0]
      var canvas = document.createElement('canvas')
      canvas.width = 360
      canvas.height = 360
      var ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.font = 'normal 14px Arial'
      ctx.fillStyle = '#000'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(this.$t('商家') +'：'+ that.info.name + '(' + that.info.code + ')', 180, 20)
      ctx.drawImage(img, 80, 40)
      var url = canvas.toDataURL('image/png')
      document.getElementById('downloadImg').setAttribute('href', url)
      document.getElementById('downloadImg').setAttribute('download', this.$t('商家码')+'--' + this.info.name + '.jpg')
    },
    qrCode(item) {
      let that = this
      console.log(item)
      let query = {
        deviceId: 0,
        code:'supplierCharge',
        supplierId:item.id
      }
      getAction('/device/bisDeviceInfo/qrCode', query).then((res) => {
        if (res.success) {
          document.getElementById('qrcode').innerHTML = '' //获取生成二维码后显示的容器的ID
          that.qrCode = new QRCode('qrcode', {
            width: 150, //二维码的宽度
            height: 150, //二维码的高度
            text: res.result, //调用weixincode()方法时后台传的code
            colorDark: '#000', //二维码颜色
            colorLight: '#fff', //二维码底色
          })
        }else{
          that.$message.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>